"use client"

import React, { useEffect, useState } from "react"
import { Button } from "@/components/ui/button"
import { personalInfo } from "@/data/personalData"
import { Github, Linkedin, Twitter, Mail, Download, ArrowDown } from "lucide-react"
import Image from "next/image"

export const Hero = () => {
  const [currentRoleIndex, setCurrentRoleIndex] = useState(0)
  const [displayText, setDisplayText] = useState("")
  const [isDeleting, setIsDeleting] = useState(false)

  const roles = [
    "全栈开发工程师",
    "前端架构师",
    "技术爱好者",
    "开源贡献者"
  ]

  useEffect(() => {
    const currentRole = roles[currentRoleIndex]
    const typingSpeed = isDeleting ? 50 : 100

    if (!isDeleting && displayText.length < currentRole.length) {
      const timeout = setTimeout(() => {
        setDisplayText(currentRole.slice(0, displayText.length + 1))
      }, typingSpeed)
      return () => clearTimeout(timeout)
    } else if (isDeleting && displayText.length > 0) {
      const timeout = setTimeout(() => {
        setDisplayText(displayText.slice(0, -1))
      }, typingSpeed)
      return () => clearTimeout(timeout)
    } else if (!isDeleting && displayText.length === currentRole.length) {
      const timeout = setTimeout(() => {
        setIsDeleting(true)
      }, 2000)
      return () => clearTimeout(timeout)
    } else if (isDeleting && displayText.length === 0) {
      setIsDeleting(false)
      setCurrentRoleIndex((prev) => (prev + 1) % roles.length)
    }
  }, [displayText, isDeleting, currentRoleIndex])

  const scrollToSection = (sectionId: string) => {
    const element = document.querySelector(sectionId)
    element?.scrollIntoView({ behavior: "smooth" })
  }

  const getSocialIcon = (icon: string) => {
    switch (icon) {
      case "github":
        return <Github className="h-5 w-5" />
      case "linkedin":
        return <Linkedin className="h-5 w-5" />
      case "twitter":
        return <Twitter className="h-5 w-5" />
      case "mail":
        return <Mail className="h-5 w-5" />
      default:
        return null
    }
  }

  return (
    <section className="min-h-screen flex items-center justify-center relative overflow-hidden bg-gradient-to-br from-primary/10 via-background to-secondary/10">
      {/* Animated background particles */}
      <div className="absolute inset-0">
        {[...Array(20)].map((_, i) => (
          <div
            key={i}
            className="absolute animate-pulse"
            style={{
              left: `${Math.random() * 100}%`,
              top: `${Math.random() * 100}%`,
              animationDelay: `${Math.random() * 5}s`,
              animationDuration: `${3 + Math.random() * 4}s`,
            }}
          >
            <div
              className="w-2 h-2 bg-primary/30 rounded-full"
              style={{
                animation: `float ${10 + Math.random() * 20}s ease-in-out infinite`,
              }}
            />
          </div>
        ))}
      </div>

      <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 relative z-10">
        <div className="text-center">
          {/* Avatar */}
          <div className="mb-8 flex justify-center">
            <div className="relative">
              <div className="w-40 h-40 rounded-full bg-gradient-to-br from-primary to-secondary p-1">
                <div className="w-full h-full rounded-full bg-background flex items-center justify-center">
                  <div className="w-36 h-36 rounded-full bg-gradient-to-br from-primary/20 to-secondary/20 flex items-center justify-center">
                    <span className="text-4xl font-bold text-primary">张</span>
                  </div>
                </div>
              </div>
              <div className="absolute -bottom-2 -right-2 w-8 h-8 bg-green-500 rounded-full border-4 border-background"></div>
            </div>
          </div>

          {/* Name and Title */}
          <h1 className="text-5xl md:text-7xl font-bold text-foreground mb-4">
            {personalInfo.name}
          </h1>

          <div className="text-2xl md:text-3xl text-muted-foreground mb-6 h-8">
            <span className="text-primary">{displayText}</span>
            <span className="animate-pulse">|</span>
          </div>

          <p className="text-lg md:text-xl text-muted-foreground mb-8 max-w-2xl mx-auto leading-relaxed">
            {personalInfo.tagline}
          </p>

          {/* Social Links */}
          <div className="flex justify-center space-x-4 mb-8">
            {personalInfo.social.map((social, index) => (
              <a
                key={index}
                href={social.url}
                target="_blank"
                rel="noopener noreferrer"
                className="p-3 rounded-full bg-background border hover:bg-primary hover:text-primary-foreground transition-all duration-200 hover:scale-110"
                aria-label={social.name}
              >
                {getSocialIcon(social.icon)}
              </a>
            ))}
          </div>

          {/* CTA Buttons */}
          <div className="flex flex-col sm:flex-row gap-4 justify-center mb-12">
            <Button
              size="lg"
              onClick={() => scrollToSection("#contact")}
              className="px-8 py-6 text-lg"
            >
              联系我
            </Button>
            <Button
              variant="outline"
              size="lg"
              onClick={() => scrollToSection("#projects")}
              className="px-8 py-6 text-lg"
            >
              查看作品
            </Button>
            <Button
              variant="secondary"
              size="lg"
              className="px-8 py-6 text-lg"
            >
              <Download className="mr-2 h-5 w-5" />
              下载简历
            </Button>
          </div>

          {/* Scroll indicator */}
          <div className="animate-bounce">
            <Button
              variant="ghost"
              size="icon"
              onClick={() => scrollToSection("#about")}
              className="hover:bg-transparent"
            >
              <ArrowDown className="h-6 w-6" />
            </Button>
          </div>
        </div>
      </div>

      <style jsx>{`
        @keyframes float {
          0%, 100% {
            transform: translateY(0px) rotate(0deg);
            opacity: 0.3;
          }
          25% {
            transform: translateY(-20px) rotate(90deg);
            opacity: 0.8;
          }
          50% {
            transform: translateY(-40px) rotate(180deg);
            opacity: 0.3;
          }
          75% {
            transform: translateY(-20px) rotate(270deg);
            opacity: 0.8;
          }
        }
      `}</style>
    </section>
  )
}